<template>
  <div class="container">
    <div class="w1300">
      <!--面包屑-->
      <breadcrumb
        currentPath="/mall/goods/detail"
        title="商品详情"
      ></breadcrumb>

      <div class="shop-name-wrap flex-yc flex-xbt">
        <div class="flex-yc">
          <h2>张三的店铺</h2>
          <div class="comment flex-yc">
            评价：
            <el-rate v-model="comment" />
          </div>
        </div>
        <div class="customer-go-shop flex-yc">
          <router-link to="">
            <el-icon>
              <ChatLineRound />
            </el-icon>
            联系客服
          </router-link>
          <router-link to="/mall/shop/index">
            <el-icon>
              <Shop />
            </el-icon>
            进入店铺
          </router-link>
        </div>
      </div>

      <div class="shop-detail-wrap flex-xbt">
        <div class="imgwaper">
          <pic-zoom url="https://826327700.github.io/vue-piczoom/dist/static/imac2.jpg" :scale="2"></pic-zoom>
        </div>
        <div class="detail-container">
          <h3>
            这是商品i名这是商品i名这是商品i名这是商品i名这是商品i名这是商品i名这是商品i名这是商品i名这是商品i名这是商品i名这是商品i名
          </h3>
          <div class="price-wrap">
            限时抢购 ￥
            <b>6000.00</b>
            起
          </div>
          <el-form label-width="70">
            <el-form-item label="配送至：">
              <el-cascader
                separator=" "
                v-model="address"
                :options="options"
                :props="props"
                placeholder="请选择配送地"
                @change="onChangeAddress"
              />
            </el-form-item>
            <el-form-item label="类别一：">
              <el-radio-group v-model="radio1">
                <el-radio-button label="月会员（优惠券十张）" />
                <el-radio-button label="年会员（优惠券十张）" />
                <el-radio-button label="年会员" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="类别二：">
              <el-radio-group v-model="radio2">
                <el-radio-button label="月会员（优惠券十张）" />
                <el-radio-button label="年会员（优惠券十张）" />
                <el-radio-button label="年会员" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="数量：" class="num-wrap">
              <el-input-number
                v-model="num"
                :min="1"
                :max="10"
                @change="handleChange"
              />
              <span>有货</span>
            </el-form-item>
            <el-button-group class="btn-wrap" size="large">
              <el-button type="primary" round>立即购买</el-button>
              <el-button
                type="success"
                round
                @click="router.push('/mall/goods/car')"
              >
                加入购物车
              </el-button>
            </el-button-group>
          </el-form>
        </div>
      </div>

      <div class="comment-wrap">
        <el-tabs class="demo-tabs" @tab-click="onHandlerTabChange">
          <el-tab-pane label="详情" name="first">详情</el-tab-pane>
          <el-tab-pane label="评价" name="second">
            <div class="user-comment-wrap">
              <div class="user-comment-item" v-for="item in 10" :key="item">
                <div class="user-info-wrap flex-yc flex-xbt">
                  <div class="flex-yc">
                    <img class="avatar" src="" />
                    <div class="flex-y flex-xc">
                      <div class="username flex-xc">
                        这里是用户昵称
                        <img src="@/pages/mall/assets/images/vip-icon.png" />
                      </div>
                      <span class="comment-date">2020.02.03 13:00:00</span>
                    </div>
                  </div>
                  <div class="comment-wrap-r flex-yc">
                    评价：
                    <el-rate v-model="comment" disabled />
                  </div>
                </div>
                <p class="comment-con">
                  这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文这里是评论正文
                </p>
                <div class="comment-img-wrap flex-yc">
                  <img src="" />
                  <img src="" />
                  <img src="" />
                </div>
                <span class="sku">「商品名称」+sku</span>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Breadcrumb from '@/pages/mall/components/BreadcrumbCom.vue'
import PicZoom from '@/pages/mall/components/PicZoom.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const address = ref('')
const comment = ref(3)
const radio1 = ref('')
const radio2 = ref('')
const num = ref(0)

const handleChange = (value: number) => {
  console.log(value)
}

const props = {
  expandTrigger: 'hover' as const,
}

const onChangeAddress = (value: string) => {
  console.log(value)
}

const onHandlerTabChange = (value: string) => {
  console.log(value)
}

const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation',
          },
          {
            value: 'top nav',
            label: 'Top Navigation',
          },
        ],
      },
    ],
  },
  {
    value: 'component',
    label: 'Component',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          {
            value: 'layout',
            label: 'Layout',
          },
          {
            value: 'color',
            label: 'Color',
          },
          {
            value: 'typography',
            label: 'Typography',
          },
          {
            value: 'icon',
            label: 'Icon',
          },
          {
            value: 'button',
            label: 'Button',
          },
        ],
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          {
            value: 'radio',
            label: 'Radio',
          },
          {
            value: 'checkbox',
            label: 'Checkbox',
          },
          {
            value: 'input',
            label: 'Input',
          },
          {
            value: 'input-number',
            label: 'InputNumber',
          },
          {
            value: 'select',
            label: 'Select',
          },
          {
            value: 'cascader',
            label: 'Cascader',
          },
          {
            value: 'switch',
            label: 'Switch',
          },
          {
            value: 'slider',
            label: 'Slider',
          },
          {
            value: 'time-picker',
            label: 'TimePicker',
          },
          {
            value: 'date-picker',
            label: 'DatePicker',
          },
          {
            value: 'datetime-picker',
            label: 'DateTimePicker',
          },
          {
            value: 'upload',
            label: 'Upload',
          },
          {
            value: 'rate',
            label: 'Rate',
          },
          {
            value: 'form',
            label: 'Form',
          },
        ],
      },
      {
        value: 'data',
        label: 'Data',
        children: [
          {
            value: 'table',
            label: 'Table',
          },
          {
            value: 'tag',
            label: 'Tag',
          },
          {
            value: 'progress',
            label: 'Progress',
          },
          {
            value: 'tree',
            label: 'Tree',
          },
          {
            value: 'pagination',
            label: 'Pagination',
          },
          {
            value: 'badge',
            label: 'Badge',
          },
        ],
      },
      {
        value: 'notice',
        label: 'Notice',
        children: [
          {
            value: 'alert',
            label: 'Alert',
          },
          {
            value: 'loading',
            label: 'Loading',
          },
          {
            value: 'message',
            label: 'Message',
          },
          {
            value: 'message-box',
            label: 'MessageBox',
          },
          {
            value: 'notification',
            label: 'Notification',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'menu',
            label: 'Menu',
          },
          {
            value: 'tabs',
            label: 'Tabs',
          },
          {
            value: 'breadcrumb',
            label: 'Breadcrumb',
          },
          {
            value: 'dropdown',
            label: 'Dropdown',
          },
          {
            value: 'steps',
            label: 'Steps',
          },
        ],
      },
      {
        value: 'others',
        label: 'Others',
        children: [
          {
            value: 'dialog',
            label: 'Dialog',
          },
          {
            value: 'tooltip',
            label: 'Tooltip',
          },
          {
            value: 'popover',
            label: 'Popover',
          },
          {
            value: 'card',
            label: 'Card',
          },
          {
            value: 'carousel',
            label: 'Carousel',
          },
          {
            value: 'collapse',
            label: 'Collapse',
          },
        ],
      },
    ],
  },
  {
    value: 'resource',
    label: 'Resource',
    children: [
      {
        value: 'axure',
        label: 'Axure Components',
      },
      {
        value: 'sketch',
        label: 'Sketch Templates',
      },
      {
        value: 'docs',
        label: 'Design Documentation',
      },
    ],
  },
]
</script>

<style scoped lang="scss">
.container {
  background-color: #f7f8fa;

  .shop-name-wrap {
    padding: 16px 40px;
    background-color: #fff;
    border-radius: 500px;

    h2 {
      padding-right: 63px;
      margin-right: 28px;
      font-size: 20px;
      font-weight: 600;
      color: #021429;
      border-right: 1px solid $borderCol;
    }

    .comment {
      font-size: 14px;
      color: #9ba1a8;
    }

    .customer-go-shop {
      a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 110px;
        height: 36px;
        font-size: 14px;
        color: #9ba1a8;
        border: 1px solid $borderCol;
        border-radius: 50px;

        :deep {
          .el-icon {
            margin-right: 4px;
          }
        }

        &:hover {
          color: $primary;
          border-color: $primary;
        }

        & + a {
          margin-left: 20px;
        }
      }
    }
  }

  .shop-detail-wrap {
    padding: 33px 0 60px;

    .imgwaper {
      width: 500px;
      height: 400px;
      background-color: #d9d9d9;
    }

    .detail-container {
      flex: 1;
      padding-left: 28px;

      h3 {
        font-size: 20px;
        font-weight: 500;
        line-height: 30px;
        color: #021429;
      }

      .price-wrap {
        margin: 16px 0 32px;
        font-size: 14px;
        color: $danger;

        b {
          font-size: 24px;
        }
      }

      .num-wrap {
        margin-top: 40px;

        span {
          margin-left: 5px;
          font-size: 14px;
          color: #606266;
        }
      }

      .btn-wrap {
        margin-top: 5px;
      }
    }
  }

  .comment-wrap {
    padding-bottom: 50px;

    .user-comment-wrap {
      .user-comment-item {
        padding: 30px 0;

        & + .user-comment-item {
          border-top: 1px solid $borderCol;
        }

        .user-info-wrap {
          margin-bottom: 20px;

          .avatar {
            width: 58px;
            height: 58px;
            margin-right: 8px;
            background-color: #d9d9d9;
            border-radius: 50%;
          }

          .username {
            margin-bottom: 8px;
            font-size: 16px;
            font-weight: 600;
            color: #040724;

            > img {
              height: 13px;
              margin-left: 5px;
            }
          }

          .comment-date {
            font-size: 14px;
            color: #040724;
          }

          .comment-wrap-r {
            font-size: 14px;
            color: #9ba1a8;
          }
        }

        .comment-con {
          font-size: 14px;
          line-height: 24px;
          color: #5f6085;
        }

        .comment-img-wrap {
          margin: 8px 0 17px;

          > img {
            flex-wrap: wrap;
            width: 94px;
            height: 94px;
            margin-right: 8px;
            background-color: #d9d9d9;
            border-radius: 4px;
          }
        }

        .sku {
          font-size: 14px;
          color: #040724;
        }
      }
    }
  }
}
</style>
